<template>
  <div class="mod-study__event">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item label="模糊搜索">
        <el-input v-model="state.dataForm.keywords" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="state.getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" row-key="id" border style="width: 100%">
      <el-table-column prop="name" label="研学活动名称" header-align="center"></el-table-column>
      <el-table-column prop="carryStartDate" label="研学结束时间" header-align="center"></el-table-column>
      <el-table-column prop="captain" label="带队人" header-align="center"></el-table-column>
      <el-table-column prop="completeStatusText" label="结营状态" header-align="center">
        <template v-slot="scope">
          <div
            :class="[scope.row.completeStatusText === '待结营' ? 'status-nocheck' : 'status-check']">
            {{ scope.row.completeStatusText }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="count" label="结营情况" header-align="center">
        <template v-slot="scope">
          <span :style="{ color: Number(scope.row.notCount) > 0 ? '#F56C6C' : '#67C23A' }">{{ scope.row.count }} / {{
      scope.row.total }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center">
        <template v-slot="scope">
          <el-button type="primary" link @click="toBasePerson(scope.row)">{{scope.row.completeStatusText === '待结营' ? '结营确认' : '查看详情'}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs } from "vue";
import useView from "@/hooks/useView";
import { studyTypeList, studyStatusList } from "@/constants/config";
import { useRouter } from "vue-router";
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus";

const router = useRouter();
const view = reactive({
  getDataListURL: "/study/student/event/completed/event/page",
  getDataListIsPage: true,
  deleteURL: "/study/event",
  deleteIsBatch: true,
  dataForm: {
    keywords: "",
  }
});

const state = reactive({ ...useView(view), ...toRefs(view) });

const toBasePerson = (row: any) => {
  router.push({
    path: '/study/base/event-complete/person',
    query: {
      eventId: row.eventId,
      completeStatusText: row.completeStatusText,
    },
  });
};
</script>
